<template>
  <div class="fake">
    <div class="content">
      <div class="head">
        国家统一法硕职业资格考试计算机化考试模拟答题演示
      </div>
      <div class="center">
        <div class="left">
          <div class="title">单项选择题</div>
          <div class="topic">
            <div class="item" v-for="item in stopic" @click="choseIndex=item.name">
              <span  class="font">
                {{item.name}}
                <span class="star" v-if="!item.check">*</span>
              </span>
            </div>
          </div>
          <div class="title">多项选择题</div>
          <div class="topic">
            <div class="item" v-for="item2 in dtopic" @click="choseIndex=item2.name">
              <span  class="font">
                {{item2.name}}
                <span class="star" v-if="!item2.check">*</span>
              </span>
            </div>
          </div>
          <div class="tip">
            说明<br/>
            1.题号右方的“*”符号代表该小题尚未选择答案。<br/>
            <!-- 2.题号右方的“?”符号代表该小题做过标记。<br/> -->
            2.选择选项的同时自动保存答案。<br/>
          </div>
        </div>
        <div class="right">
          <div class="paper">
            试卷
          </div>
          <div class="tip">
            {{nowChose.type == 1?"单项选择题。每题所设选项中只有一个正确答案，多选、错选或不选均不得分。本部分含1—20题，每题2.5分，共50分。":"多项选择题。每题所设选项中至少有两个正确答案，多选、少选、错选或不选均不得分。本部分含21—30题，每题5分， 共50分。"}}
          </div>
          <div class="index">
            第{{choseIndex}}题
          </div>
          <div class="value">
            {{nowChose.title}}<br/>
            A.{{nowChose.A}}<br/>
            B.{{nowChose.B}}<br/>
            C.{{nowChose.C}}<br/>
            D.{{nowChose.D}}
          </div>
          <div class="bottom" v-if="nowChose.type == 1">
            <div class="btn" @click="pre">上一题</div>
            <div class="index2"> 第{{choseIndex}}题</div>
            <el-radio v-model="choseList[choseIndex-1]" label="A">A</el-radio>
            <el-radio v-model="choseList[choseIndex-1]" label="B">B</el-radio>
            <el-radio v-model="choseList[choseIndex-1]" label="C">C</el-radio>
            <el-radio v-model="choseList[choseIndex-1]" label="D">D</el-radio>
            <div class="btn" @click="next">下一题</div>
            <div class="btn" @click="submit">交卷</div>
          </div>
           <div class="bottom" v-else>
            <div class="btn" @click="pre">上一题</div>
            <div class="index2"> 第{{choseIndex}}题</div>
               <el-checkbox-group v-model="choseList[choseIndex-1]">
                  <el-checkbox label="A"></el-checkbox>
                  <el-checkbox label="B"></el-checkbox>
                  <el-checkbox label="C"></el-checkbox>
                  <el-checkbox label="D"></el-checkbox>
                </el-checkbox-group>
            <div class="btn" @click="next">下一题</div>
            <div class="btn" @click="submit">交卷</div>
          </div>
        </div>
      </div>
    </div>
    <div class="login_1" v-if="showPop1">
      <div class="top">
        <div class="list1">
          <span>准&nbsp;&nbsp;考&nbsp;&nbsp;证：</span>
          <div class="input">
            <el-input v-model="account"></el-input>
          </div>
        </div>
        <div class="list2">
          <span>身份证号：</span>
          <div class="input">
            <el-input v-model="pass"></el-input>
          </div>
        </div>
        <div class=""></div>
        <img src="../assets/img/login.jpg" @click="showPop1=false" class="login" alt="">
        <img src="../assets/img/reset.jpg" class="reset" alt="">
      </div>
    </div>
    
  </div>
</template>

<script>
// @ is an alias to /src
import { MessageBox } from 'element-ui';
export default {
  name: 'user',
  data(){
    let arr =[]
    let list =[]
    for (let key=1;key<21;key++) {
      arr.push({
          id:key,
          name:key,
          check:false
        })
      list.push('')
    }
    let arr2 =[]
     for (let key=21;key<31;key++) {
      arr2.push({
          id:key,
          name:key,
          check:false
        })
        list.push([])
    }
    return{
      account:88888888,
      pass:8888888888888,
      showPop1:false,
      stopic:arr,       //左边选项
      dtopic:arr2,      //左边选项
      choseIndex:2,
      content:[],       //单选题
      dcontent:[],      //多选题
      choseList:list,   //选择内容
      nowChose:{
        type:1
      },
      radio:''

    }
  },
  components: {

  },
  mounted(){
    let content = testList.sort(item=>{
      return (Math.random()-0.5)
    }).splice(0,20)
    let dcontent = dxtestList.sort(item=>{
      return (Math.random()-0.5)
    }).splice(0,10)
    console.log(this.dtopic[0]);
    this.content = content
    this.dcontent = dcontent
    this.choseIndex = 1
  },
  watch:{
    choseIndex(newv,oldv){
      if(newv<=this.content.length){
        this.nowChose = this.content[newv-1]
      }else{
        this.nowChose = this.dcontent[newv-21]
      }
      if(oldv<=20){
        if(this.choseList[oldv-1]!==''){
          this.stopic[oldv-1].check =true
        }
      }else{
        if(this.choseList[oldv-1].length>0){
          this.dtopic[oldv-21].check =true
        }
      }
    }
  },
  methods:{
    pre(){
      if(this.choseIndex>1){
        this.choseIndex--
      }
    },
    next(){
      if(this.choseIndex<30){
        this.choseIndex++
      }
    },
    submit(){
      let _ = this
       this.$confirm('是否确认交卷，交卷后无法继续答题', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _.endTest()
        }).catch(() => {
          console.log('error')
        });
    },
    endTest(){
      let arr = []
      arr.push(...this.content)
      arr.push(...this.dcontent)
      arr.forEach((item,index)=>{
        item.reply=this.choseList[index]
      })
      this.$sl("analyze",arr)
      this.$router.push('/analyze')
    }
  }
}
</script>
<style lang="less" scoped>
.fake{
  width: 100%;
  height: 100%;
  .login_1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d6dae;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    .top{
      width: 536px;
      height: 291px;
      background: url('../assets/img/bg_begin.png');
      background-size: 100% 100%;
      position: relative;
      img{
        position: absolute;
        width: 75px;
        cursor: pointer;
        height: 28px;
        bottom: 60px;
      }
      .login{
        right: 250px;
      }
      .reset{
        right: 100px;
      }
      .input{
        height: 20px;
        width: 150px;
        /deep/ .el-input input{
          height: 20px;
          padding: 0;
        }
      }
      .list1{
        display: flex;
        position: absolute;
        top: 100px;
        left: 240px;
      }
      .list2{
        display: flex;
        position: absolute;
        top: 140px;
        left: 240px;
      }
    }
  }
  .content{
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    .head{
      background: url('../assets/img/head.png') repeat-x;
      height: 90px;
      width: 100%;
      font-family: 微软雅黑, 宋体;
      font-size: 16px;
      font-weight: 700;
      padding-top: 20px;
      padding-left: 20px;
      color: #fff;
    }
    .center{
      display: flex;
      height: calc(100% - 90px);
      background: rgb(222, 235, 246);
      .left{
        height: 100%;
        overflow-y: auto;
        margin-top: 6px;
        width: 302px;
        border-right: 1px #99DCFA solid;;
        .title{
          font-size: 14px;
          background: -webkit-linear-gradient(#498fbf, #66a9d8);
          background: -o-linear-gradient(#498fbf, #66a9d8);
          background: -moz-linear-gradient(#498fbf, #66a9d8);
          background: -ms-linear-gradient(#498fbf, #66a9d8);
          background: linear-gradient(#498fbf, #66a9d8);
          padding-left: 10px;
          line-height: 30px;
          font-weight: 600;
          height: 30px;
        }
        .topic{
          width: 100%;
          min-height: 32px;
          padding: 4px;
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          border-bottom: 1px #99DCFA solid;
          .item{
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px;
            background: rgb(222, 235, 246);
            color: rgb(44, 63, 232);
            cursor: pointer;
            .font{
              position: relative;
              font-size: 14px;
              font-family: 微软雅黑, 宋体;
              text-decoration: underline;
              .star{
                position: absolute;
                right: -6px;
                top: -2px;
                color: #f00;
              }
            }
          }
        }
        .tip{
          color: #FF4642;
          font-size: 18px;
          line-height: 24px;
          padding-left: 10px;
        }
      }
      .right{
        height: 100%;
        flex: 1;
        padding: 4px 10px 40px 20px;
        position: relative;
        .paper{
          background-image: url('https://www.zhumavip.com/w/image/mokao/markst.png');
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 109px;
          height: 30px;
          font-size: 14px;
          font-weight: bolder;
          line-height: 29px;
        }
        .tip{
          font-weight: 400;
          padding-left: 4px;
          border-bottom: 1px #9fb7f7 solid;
          font-size: 18px;
          line-height: 26px;
          height: 67px;
          width: 100%;
          display: flex;
          align-items: center;
          border-top: 1px #99DCFA solid;
          border-bottom: 1px #99DCFA solid;
        }
        .index{
          font-size: 20px;
          margin-top: 30px;
          margin-bottom: 20px;
        }
        .value{
          font-size: 20px;
          position: relative;
          z-index: 2;
          line-height: 42px;
          margin-left: 20px;
          color: #000;
        }
        .bottom{
          display: flex;
          position: absolute;
          bottom: 40px;
          left: 120px;
          align-items: center;
          .btn{
            background-image: url('https://www.zhumavip.com/w/image/mokao/pic_39.jpg');
            background-size: 100% 100%;
            width: 85px;
            height: 31px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(51, 51, 51);
            font-size: 12px;
            margin: 0 20px;
            cursor: pointer;
          }
          .index2{
            font-size: 18px;
            display: inline-block;
            vertical-align: middle;
            margin: 0 20px;
          }
          /deep/ .el-radio{
            // height: 18px;
          }
        }
      }
    }
  }
}
</style>